<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="20" :xs="24">
                <el-button
                    size="mini"
                    type="button"
                    icon="el-icon-add"
                    @click="handleAdd()"
                >新增</el-button>
            </el-col>
        </el-row>
        <el-col :span="20" :xs="24">
          <el-table v-loading="loading" :data="scriptList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="编号" align="center" key="id" prop="id"  />
            <el-table-column label="脚本名称" align="center" key="name" prop="name"  />
            <el-table-column label="脚本类型" align="center" key="type" prop="type" />
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
            <template slot-scope="scope">
            <el-button
                v-if="scope.row.id !== 1"
                size="mini"
                type="text"
                icon="el-icon-update"
                @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
                v-if="scope.row.id !== 1"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
            >删除</el-button>
            <el-button
                v-if="scope.row.id !== 1"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleApply1(scope.row.id)"
            >发布</el-button>
            </template>
            </el-table-column>
          </el-table>
  
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      
        <el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="脚本ID" prop="id" hidden="true">
                    <el-input v-model="form.id" />
                </el-form-item>
                <el-form-item label="脚本名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入脚本名称" />
                </el-form-item>
                <el-form-item label="脚本类型" prop="type">
                    <el-select v-model="form.type" placeholder="请选择脚本类型">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="脚本内容" prop="content" class="code-edit">
                    <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 50, maxRows: 400}" placeholder="请输入脚本内容">
                      <template>
                          <div class="code-edit">
                              <codemirror ref="codeMirror" :value="value" :options="cmOptions"></codemirror>
                          </div>
                      </template>
                    </el-input>
                    
                    
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
            
        </el-dialog>

        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="10%"
            :before-close="handleClose">
            <span>已保存成功，是否直接发布</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelRelease">取 消</el-button>
                <el-button type="primary" @click="handleApply">发 布</el-button>
            </span>
        </el-dialog>
        
    </div>

    
  </template>
  
  <script>
    import { Base64 } from "js-base64";
    import { list,remove,saveOrUpate,get,release,test } from "@/api/groovy/script";
    import {codemirror} from 'vue-codemirror';
    import 'codemirror/mode/clike/clike';
    import 'codemirror/lib/codemirror';
    import 'codemirror/theme/eclipse.css';
    import 'codemirror/mode/htmlmixed/htmlmixed';
    import 'codemirror/mode/javascript/javascript';
    import 'codemirror/mode/css/css';
    import 'codemirror/mode/xml/xml';
    import 'codemirror/addon/fold/foldcode';
    import 'codemirror/addon/fold/foldgutter';
    import 'codemirror/addon/fold/foldgutter.css';
    import 'codemirror/addon/fold/brace-fold';
//import { options } from "runjs";
//import { values } from "core-js/core/array";
    export default {
      name: "Script",
      components:{codemirror},
      props:{value:''},
      data() {
        return {
          title: "脚本表单填写",
          open: false,
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 用户表格数据
          scriptList: null,
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
          form:{},
          rules: {
                name: [
                { required: true, message: "名称不能为空", trigger: "blur" }
                ],
                content: [
                { required: true, message: "脚本不能为空", trigger: "blur" }
                ],
                type: [
                { required: true, message: "类型不能为空", trigger: "blur" }
                ]
            },
          options:[{value:'0',label:'普通方法'},{value:'1',label:'Bean对象'},{value:'2',label:'Request控制'}],
          dialogVisible: false,
          releaseId: "",
          //codemirror:null,
          code:'',
          cmOptions:{
              autoRefresh:true,
              value:'',//初始内容
              mode:'text/x-java',
              tabSize:4,//tab空格宽度
              styleActiveLine:true,//光标所在行高亮
              lineNumbers:true,//显示行号
              theme:'eclipse',//主题
              readOnly:false,//是否只读
              lineWrapping:false,//
              foldGutter:false,
              gutters:['CodeMirror-lint-markers','CodeMirror-linenumbers','CodeMirror-foldgutter']
          }
          
        };
      },
      created() {
        this.getList();
        //this.getTest();
      },
      methods: {
        getList() {
          this.loading = true;
          list(this.queryParams).then(res => {
            this.scriptList = res.data;
            this.loading = false;
          })
        },
        getTest(){
            test().then(res=>{
                console.log(res);
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.userId);
          this.single = selection.length != 1;
          this.multiple = !selection.length;
        },
        handleUpdate(row){
          console.log(row);
            this.open = true;
            this.form = row;
        },
        handleDelete(row){
          remove(row.id).then(response => {
            this.msgSuccess(response.msg);
            this.getList();
          })
        },
        handleAdd(){
            this.open = true;
            this.form = {};
        },
        submitForm(row){
            saveOrUpate(this.form).then(res=>{
                if(res.data.code = 200){
                    this.dialogVisible = true
                    this.releaseId = res.data.id;
                }
                
            })
            
        },

        cancel(){
            this.form = {}
            this.open = false;
            this.releaseId = ""
        },
        handleApply1(id){
          this.releaseId = id;
          this.dialogVisible = true;
        },
        handleApply(){
            release(this.releaseId).then(res=>{
                this.dialogVisible = false;
                this.open = false;
                this.getList();
            })
        },

        cancelRelease(){
            this.dialogVisible = false;
            this.open = false;
            this.releaseId = ""
            this.getList();
        },
        handleClose(){
            this.dialogVisible = false;
            this.open = false;
            this.getList();
        }
      }
    };
  </script>
  